import { useEffect } from 'react';
import { FileTextIcon, CheckCircleIcon, AlertTriangleIcon, CopyrightIcon, StarIcon, MailIcon } from 'lucide-react';

const Terms = () => {
  useEffect(() => {
    document.title = 'Terms of Service | TronoraHub';
  }, []);
  return <div className="w-full bg-[#0d0d10] pt-24 pb-16">
      <div className="container mx-auto px-4 max-w-4xl">
        {/* Header Section */}
        <div className="text-center mb-12">
          <div className="inline-flex items-center justify-center w-16 h-16 bg-[#4361ee]/10 rounded-full mb-6">
            <FileTextIcon className="w-8 h-8 text-[#4361ee]" />
          </div>
          <h1 className="text-3xl md:text-4xl font-bold font-display mb-4 gradient-text">
            Terms of Service
          </h1>
          <p className="text-[#8a8f98] text-lg">
            Please read these terms carefully before using our services.
          </p>
          <p className="text-[#8a8f98] text-sm mt-2">
            Last updated: {new Date().toLocaleDateString()}
          </p>
        </div>

        {/* Content Cards */}
        <div className="space-y-8">
          {/* Acceptance */}
          <div className="card p-8">
            <div className="flex items-center mb-4">
              <div className="w-10 h-10 bg-[#06d6a0]/10 rounded-lg flex items-center justify-center mr-4">
                <CheckCircleIcon className="w-5 h-5 text-[#06d6a0]" />
              </div>
              <h2 className="text-2xl font-bold font-display">Acceptance of Terms</h2>
            </div>
            <p className="text-[#8a8f98] leading-relaxed">
              By accessing and using TronoraHub ("we," "our," or "us"), you accept
              and agree to be bound by these Terms of Use. If you do not agree to
              these terms, please do not use our services.
            </p>
          </div>

          {/* Changes */}
          <div className="card p-8">
            <div className="flex items-center mb-4">
              <div className="w-10 h-10 bg-[#4361ee]/10 rounded-lg flex items-center justify-center mr-4">
                <span className="text-[#4361ee] font-bold">2</span>
              </div>
              <h2 className="text-2xl font-bold font-display">Changes to Terms</h2>
            </div>
            <p className="text-[#8a8f98] leading-relaxed">
              We reserve the right to modify these Terms of Use at any time. Your
              continued use of TronoraHub following the posting of changes
              constitutes your acceptance of those changes.
            </p>
          </div>

          {/* Intellectual Property */}
          <div className="card p-8">
            <div className="flex items-center mb-4">
              <div className="w-10 h-10 bg-[#06d6a0]/10 rounded-lg flex items-center justify-center mr-4">
                <CopyrightIcon className="w-5 h-5 text-[#06d6a0]" />
              </div>
              <h2 className="text-2xl font-bold font-display">Content & Intellectual Property</h2>
            </div>
            <p className="text-[#8a8f98] leading-relaxed mb-6">
              All content on TronoraHub, including text, graphics, logos, images,
              audio clips, digital downloads, and data compilations, is the
              property of TronoraHub or its content suppliers and is protected by
              international copyright laws.
            </p>
            
            <div className="bg-[#151518] p-6 rounded-lg">
              <h3 className="text-lg font-semibold text-white mb-3">User-Generated Content</h3>
              <p className="text-[#8a8f98] leading-relaxed">
                By posting content on TronoraHub, you grant us a non-exclusive,
                royalty-free, perpetual, irrevocable, and fully sublicensable right
                to use, reproduce, modify, adapt, publish, translate, create
                derivative works from, distribute, and display such content
                throughout the world in any media.
              </p>
            </div>
          </div>

          {/* User Conduct */}
          <div className="card p-8">
            <div className="flex items-center mb-4">
              <div className="w-10 h-10 bg-[#4361ee]/10 rounded-lg flex items-center justify-center mr-4">
                <span className="text-[#4361ee] font-bold">4</span>
              </div>
              <h2 className="text-2xl font-bold font-display">User Conduct</h2>
            </div>
            <p className="text-[#8a8f98] leading-relaxed">
              You agree not to use TronoraHub for any unlawful purpose or in any
              way that could damage, disable, overburden, or impair our service.
              You agree not to attempt to gain unauthorized access to any part of
              our services, other accounts, computer systems, or networks
              connected to our services.
            </p>
          </div>

          {/* Reviews */}
          <div className="card p-8">
            <div className="flex items-center mb-4">
              <div className="w-10 h-10 bg-[#06d6a0]/10 rounded-lg flex items-center justify-center mr-4">
                <StarIcon className="w-5 h-5 text-[#06d6a0]" />
              </div>
              <h2 className="text-2xl font-bold font-display">Product Reviews & Ratings</h2>
            </div>
            <p className="text-[#8a8f98] leading-relaxed mb-6">
              TronoraHub provides product reviews and ratings for informational
              purposes only. While we strive for accuracy and objectivity, we do
              not guarantee the completeness, reliability, or accuracy of this
              information.
            </p>
            
            <div className="bg-[#151518] p-6 rounded-lg">
              <h3 className="text-lg font-semibold text-white mb-3">Affiliate Links</h3>
              <p className="text-[#8a8f98] leading-relaxed">
                Some links on TronoraHub are affiliate links, meaning we may earn a
                commission if you click through and make a purchase. This does not
                affect our editorial independence or the products we choose to
                review.
              </p>
            </div>
          </div>

          {/* Legal Disclaimers */}
          <div className="grid md:grid-cols-2 gap-6">
            <div className="card p-8">
              <div className="flex items-center mb-4">
                <div className="w-10 h-10 bg-[#ff6b6b]/10 rounded-lg flex items-center justify-center mr-4">
                  <AlertTriangleIcon className="w-5 h-5 text-[#ff6b6b]" />
                </div>
                <h3 className="text-xl font-bold font-display">Disclaimer</h3>
              </div>
              <p className="text-[#8a8f98] leading-relaxed">
                TronoraHub is provided on an "as is" and "as available" basis. We
                make no warranties, expressed or implied, regarding the operation of
                our services or the information, content, materials, or products
                included on our site.
              </p>
            </div>

            <div className="card p-8">
              <div className="flex items-center mb-4">
                <div className="w-10 h-10 bg-[#4361ee]/10 rounded-lg flex items-center justify-center mr-4">
                  <span className="text-[#4361ee] font-bold">7</span>
                </div>
                <h3 className="text-xl font-bold font-display">Liability</h3>
              </div>
              <p className="text-[#8a8f98] leading-relaxed">
                TronoraHub will not be liable for any damages of any kind arising
                from the use of our site, including, but not limited to direct,
                indirect, incidental, punitive, and consequential damages.
              </p>
            </div>
          </div>

          {/* Governing Law */}
          <div className="card p-8">
            <div className="flex items-center mb-4">
              <div className="w-10 h-10 bg-[#4361ee]/10 rounded-lg flex items-center justify-center mr-4">
                <span className="text-[#4361ee] font-bold">8</span>
              </div>
              <h2 className="text-2xl font-bold font-display">Governing Law</h2>
            </div>
            <p className="text-[#8a8f98] leading-relaxed">
              These Terms of Use are governed by and construed in accordance with
              the laws of [Jurisdiction], without giving effect to any principles
              of conflicts of law.
            </p>
          </div>

          {/* Contact */}
          <div className="card p-8 bg-gradient-to-r from-[#4361ee]/5 to-[#06d6a0]/5 border border-[#4361ee]/20">
            <div className="flex items-center mb-4">
              <div className="w-10 h-10 bg-[#4361ee]/10 rounded-lg flex items-center justify-center mr-4">
                <MailIcon className="w-5 h-5 text-[#4361ee]" />
              </div>
              <h2 className="text-2xl font-bold font-display">Contact Information</h2>
            </div>
            <p className="text-[#8a8f98] leading-relaxed">
              If you have any questions about these Terms of Use, please contact
              us at: 
              <a href="mailto:terms@tronorahub.com" className="text-[#4361ee] hover:text-[#06d6a0] ml-1">
                terms@tronorahub.com
              </a>
            </p>
          </div>
        </div>
      </div>
    </div>;
};
export default Terms;